<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!-- ============== LEFT SIDEBAR ================== -->
<div id="left-sidebar">
	<div class="widget">
		<div class="show-box">
			<div class="title-box">Narrow Your Results</div>
			<div class="content-boxx">
				<form name="search" id="narrow_search" action="#" method="post">
				
					<p style="font-size: 15px; border-bottom: solid 1px; font-weight: bold" class="line">Price</p>
					<c:forEach var="price" items="${requestScope.lstPrice}" >
						<input type="checkbox" name="priceNarrow" value="${price.idprice}" onChange="sendMessage()" /> ${price.name} <br />
					</c:forEach>
					<br />
					
					<p style="font-size: 15px; border-bottom: solid 1px; font-weight: bold" class="line">Device Brand</p>
					<c:forEach var="devicebrand" items="${requestScope.lstDeviceBrand}" >
						<input type="checkbox" name="devicebrandNarrow" value="${devicebrand.id}" onChange="sendMessage()" /> ${devicebrand.name} <br /> 
					</c:forEach>
					<br />
					
					<p style="font-size: 15px; border-bottom: solid 1px; font-weight: bold" class="line">Carrier</p>
					<c:forEach var="carrier" items="${requestScope.lstCarrier}" >
						<input type="checkbox" name="carrierNarrow" value="${carrier.idcarrier}" onChange="sendMessage()" /> ${carrier.name} <br /> 
					</c:forEach>
					<br />
					
					<p style="font-size: 15px; border-bottom: solid 1px; font-weight: bold" class="line">Operating System</p>
					<c:forEach var="os" items="${requestScope.lstOS}" >
						<input type="checkbox" name="osNarrow" value="${os.idos}" onChange="sendMessage()" /> ${os.name} <br /> 
					</c:forEach>
					<br />
					
					<p style="font-size: 15px; border-bottom: solid 1px; font-weight: bold" class="line">Customer Reviews</p>
					<c:forEach var="review" items="${requestScope.lstReview}" >
						<input type="checkbox" name="reviewNarrow" value="${review.idcr}" onChange="sendMessage()" /> ${review.name} <br /> 
					</c:forEach>
					<br />
					
				</form>
			</div>
		</div>
	</div>
	<script>
function sendMessage(id, img) {

	var keyseach = '${request.keySearch}';
	var message;
	if ( keyseach != null && keyseach != "" ){
		message = "?idCategory=${request.idCategory}&keySearch=${request.keySearch}&narrow=";
	}
	else
		message = "?idCategory=${request.idCategory}&narrow=";
	var frm = document.getElementById('narrow_search');
   for (var i = 0; i < frm.priceNarrow.length; i++)
   	  if ( frm.priceNarrow[i].checked ){
        	message = message + "price~" + frm.priceNarrow[i].value + "~"
      }

   for (var i = 0; i < frm.devicebrandNarrow.length; i++)
      if (frm.devicebrandNarrow[i].checked){
         message = message + "devicebrand~"+ frm.devicebrandNarrow[i].value + "~"
      }

   for (var i = 0; i < frm.carrierNarrow.length; i++)
      if (frm.carrierNarrow[i].checked){
         message = message + "carrier~" + frm.carrierNarrow[i].value + "~"
      }

   for (var i = 0; i < frm.osNarrow.length; i++)
	      if (frm.osNarrow[i].checked){
	         message = message + "os~" + frm.osNarrow[i].value + "~"
	      }

   for (var i = 0; i < frm.reviewNarrow.length; i++)
	      if (frm.reviewNarrow[i].checked){
	         message = message + "rate~" + frm.reviewNarrow[i].value + "~"
	      }

   // ===
   
   var com_frm = document.getElementById('compare_frm');
	for(var i=0; i<com_frm.compare.length; i++){
		if(id == com_frm.compare[i].alt){
			com_frm.compare[i].alt = "";
			com_frm.compare[i].src = "";
			id = "-1";
			break;
		}
	}
	
	var count = 0;
	var index = -1;

	for(var i=0; i<com_frm.compare.length; i++){
		if(com_frm.compare[i].alt != ""){
			message += i + ":" + com_frm.compare[i].alt + ";" + com_frm.compare[i].src.substring(com_frm.compare[i].src.indexOf("products")) + "~";	
			count++;
		}
		else if(index == -1)
				index = i;
	}
	
	if(id){	
	if(count == 4){
					alert("Number of product for compare not than 4");
				}
				else{
				if(id != "" && id != -1)
					message += index + ":" + id + ";" + img + "~";
				}
	}
	// ===
     
   	//message += "&numproductperpage=${request.numproductperpage}&sortby=${request.sortby}&currentpage=${request.currentpage}";
   	message += "&numproductperpage=${request.numproductperpage}&sortby=${request.sortby}";
	document.location = window.location.pathname + message;
}

function check_box(){

	
	var url = location.href;
	var frm = document.getElementById('narrow_search');
	for (var i = 0; i < frm.priceNarrow.length; i++){
		var cmp = "price~" + frm.priceNarrow[i].value + "~";
		var cmp1 = "price%7E" + frm.priceNarrow[i].value + "%7E";
      	if ((url.search(cmp)) > -1 || url.search(cmp1) > -1){
         	frm.priceNarrow[i].checked = true;
      }
	}

	for (var i = 0; i < frm.devicebrandNarrow.length; i++){
		var cmp = "devicebrand~" + frm.devicebrandNarrow[i].value + "~";
		var cmp1 = "devicebrand%7E" + frm.devicebrandNarrow[i].value + "%7E";
      	if ((url.search(cmp)) > -1 || url.search(cmp1) > -1){
			frm.devicebrandNarrow[i].checked = true;
	      }
	}

	for (var i = 0; i < frm.carrierNarrow.length; i++){
		var cmp = "carrier~" + frm.carrierNarrow[i].value + "~";
		var cmp1 = "carrier%7E" + frm.carrierNarrow[i].value + "%7E";
      	if ((url.search(cmp)) > -1 || url.search(cmp1) > -1){
			frm.carrierNarrow[i].checked = true;
	      }
	}

	for (var i = 0; i < frm.osNarrow.length; i++){
		var cmp = "os~" + frm.osNarrow[i].value + "~";
		var cmp1 = "os%7E" + frm.osNarrow[i].value + "%7E";
      	if ((url.search(cmp)) > -1 || url.search(cmp1) > -1){
			frm.osNarrow[i].checked = true;
	      }
	}

	for (var i = 0; i < frm.reviewNarrow.length; i++){
		var cmp = "rate~" + frm.reviewNarrow[i].value + "~";
		var cmp1 = "rate%7E" + frm.reviewNarrow[i].value + "%7E";
      	if ((url.search(cmp)) > -1 || url.search(cmp1) > -1){
			frm.reviewNarrow[i].checked = true;
	      }
	}

	// ==
	var com_frm = document.getElementById('compare_frm');

	url = url.replaceAll("%2F","/").replaceAll("%3A",":").replaceAll("%3B",";").replaceAll("%7E","~");
	for(var i=0; i<com_frm.compare.length; i++)
	{
		if(url.search(i+":") > -1 ){
			var str = url.substring(url.search(i+":"));
			str = str.substring(2, str.search("~"));
			com_frm.compare[i].alt = str.substring(0, str.search(";"));
			var tem = str.substring(0, str.search(";"));
			com_frm.compare[i].src = str.substring(str.search(";")+1);
			if ( document.getElementById(tem) != null ){
				document.getElementById(tem).checked = true;
			}
		}
	}
}	
function removeProduct(form){
		if ( document.getElementById(form.alt) != null)
			document.getElementById(form.alt).checked = false;
		sendMessage(form.alt, form.src);
	}
String.prototype.replaceAll = function(tokencurrent, newtoken){
	var word = this.valueOf();
	while (word.indexOf(tokencurrent) != -1){
			word = word.replace(tokencurrent, newtoken);
	}
	return word;
}

function sendCompare(){
	
	var frm = document.getElementById('compare_frm');

	var count = 0;
	for(var i=0; i< frm.compare.length; i++)
	{
		if(frm.compare[i].alt != "")
			count++;	
	}
	
	if(count > 1)
	{
		var str = "/compare.action?";
		for(var i=0; i< frm.compare.length; i++){
			str += "sku" + i + "=" + frm.compare[i].alt +"&";	
		}
		var url = window.location.host  + window.location.pathname;
		url = window.location.protocol + "//" + url.substring(0, url.lastIndexOf("/")) + str;
		
		document.location =  url;
	}
	else
		alert("You must select at least 2 product!");
}
</script> 
    </div>